<template>
  <div class="div_width">
    <el-row>
      <div class="head">
        <i class="el-icon-search"></i>
        <b>快速查询</b>
      </div>
    </el-row>
    <el-row style="margin-top: 10px;margin-bottom: 10px">
      <el-col :span="10" :push="1">
        <span style="margin-right: 10px;font-size: 14px">日期</span>
        <el-date-picker
          style="width: 162px"
          v-model="data"
          type="date"
          placeholder="开始日期">
        </el-date-picker>
        <span>至</span>
        <el-date-picker
          style="width: 162px"
          v-model="date"
          type="date"
          placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="10" :push="1">
        <span style="font-size: 14px;margin-right: 10px">地点</span>
        <el-input style="width:350px" oninput="value=value.replace(/\s*/g, '')" v-model="sites" autocomplete="off"></el-input>
      </el-col>
      <el-col :span="2" :push="1">
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="13">
        <span style="font-size: 14px;margin-left: 48px">申请人</span>
        <el-select v-model="proposer" style="width: 348px" filterable remote placeholder="请选择申请人">
          <el-option
            v-for="e in empList"
            :key="e.employeesId"
            :label="e.empName"
            :value="e.employeesId">
          </el-option>
        </el-select>
      </el-col>
      <el-button @click="changeState">查询</el-button>
      <router-link :to="{path:'/part'}">
        <el-col :span="2" :push="8">
          <el-button icon="el-icon-circle-plus" style="margin-bottom:10px">新建</el-button>
        </el-col>
      </router-link>
    </el-row>
    <el-table :data="tableData" style="width:100%" :default-sort = "{prop: 'evetDate',prop: 'evetData'}">
      <el-table-column prop="evetId" type="selection"></el-table-column>
      <el-table-column prop="evetSubject" width="280px" label="主题">
        <template slot-scope="c">
          <span class="href" @click="update(c.row.evetId)">
            {{c.row.evetSubject}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="empByEmployeesId.empName" label="申请人"></el-table-column>
      <el-table-column sortable width="100" prop="evetDate" label="开始时间">
        <template slot-scope="s">
          {{s.row.evetDate | formatDate}}
        </template>
      </el-table-column>
      <el-table-column sortable width="100" prop="evetData" label="结束时间">
        <template slot-scope="s">
          {{s.row.evetData | formatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="evetDepart" label="出发地"></el-table-column>
      <el-table-column prop="evetGoal" label="目的地"></el-table-column>
      <el-table-column prop="customerByCustomId.cusName" label="对应客户"></el-table-column>
      <el-table-column prop="evetStatus" label="审批状态"></el-table-column>
      <el-table-column prop="evetState" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="s">
          <i class="el-icon-position" v-if="postLevel==1" title="出差完成" style="font-size:17px;cursor:pointer" @click="complete(s.row.evetId)"></i>
          <i class="el-icon-delete" title="删除" style="font-size:17px;cursor:pointer" @click="del(s.row.evetId)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="limit">
      <el-pagination
        :current-page.sync="currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @current-change="changePage"
        @size-change="sizeChange">
      </el-pagination>
      <p></p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AsEvection",
    data: function () {
      return {
        tableData: [],
        data: '',         //开始时间
        date: '',         //结束日期
        sites: '',        //地点
        proposer: '',     //申请人
        apprId: '',       //审批表id
        user: {},         //当前登录用户信息
        empIds:'',        //员工id
        postLevel: '',    //角色级别
        deptId: '',       //记录部门id
        empList: [],   //员工列表
        //分页
        currPage: 1,     //当前页
        totalSize: 0,    //总条数
        pageSize: 5,     //页大小
        dialogFormVisible: false,
        options: [{
          value: '选项1',
          label: '高铁'
        }, {
          value: '选项2',
          label: '动车'
        }, {
          value: '选项3',
          label: '火车'
        }, {
          value: '选项4',
          label: '飞机'
        }, {
          value: '选项5',
          label: '汽车'
        }, {
          value: '选项6',
          label: '其它'
        }]
      }
    },
    created:function() {
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.empIds = this.user.employeesId;//当前登录用户id
      this.authentication();//验证用户身份

      this.$axios.get("http://localhost:8088/ser/check-emp"
      ).then(v=>{//员工
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })
    },
    methods: {
      //验证用户身份
      authentication() {
        var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",
          {
            params: {
              empId: id
            }
        }).then(v => {
          this.deptId = v.data.deptId;//记录部门id
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              this.empIds = null;
              this.deptId = null;
              this.initData(null, null, this.data, this.date, this.sites, this.currPage, this.pageSize);
            }else{
              this.empIds = null;
              this.initData(null, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
            }
            this.postLevel = 1;
          }else{//用户是普通角色
            this.initData(id, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
          }
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      initData(employeesId, fatherDeptId, data, date, sites, currPage, pageSize) {
        this.$axios.get("http://localhost:8088/eve/evet-page",
          {
            params: {
              employeesId: employeesId,
              fatherDeptId : fatherDeptId,
              data: data,
              date: date,
              sites: sites,
              currPage: currPage,
              pageSize: pageSize
            }
          }
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      changePage(currPage) {
        this.initData(this.proposer, this.deptId, this.data, this.date, this.sites, currPage, this.pageSize);
      },
      changeState() {
        this.initData(this.proposer, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
      },
      sizeChange (pageSize) { //改变页大小
        this.pageSize = pageSize;
        this.initData(this.proposer, this.deptId, this.data, this.date, this.sites, 1, this.pageSize);
      },
      reset(){//重置
        this.data = '';
        this.date = '';
        this.sites = '';
        this.proposer = '';
        this.initData(this.proposer, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
      },
      complete(evetId){
        this.$confirm('确认出差完成, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8088/eve/complete-evet",
            {params: {evetId: evetId}}
          ).then(() => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            //刷新数据
            this.initData(this.empIds, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        })
      },
      del(evetId) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var title = "出差申请";
          this.$axios.get("http://localhost:8088/che/check-id",
            {params: {apprTitle:title, apprIds:evetId}}
          ).then(v => {
            this.apprId = v.data;
            this.$axios.get("http://localhost:8088/eve/delete-evet",
              {params: {apprId:this.apprId,evetId: evetId}}
            ).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新数据
              this.initData(this.empIds, this.deptId, this.data, this.date, this.sites, this.currPage, this.pageSize);
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      update(evetId){
        this.$router.push({
          path:'/part',
          query:{
            evetId:evetId
          }
        })
      }
    },
    filters: {
      formatDate(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day;
        /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
      }
    }
  }
</script>

<style scoped>
  .head{
    margin-top: 10px;
    margin-left: 20px;
    font-size: 12px;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .href{
    color:#009EFB;
    cursor: pointer;
  }
  .div_width{
    width: 99%;
    background-color: white;
  }
</style>


